<template>
	<div id="app">
		<!--<view-box ref="viewBox">-->
			<transition :name='animationType'>
				<keep-alive>
					<router-view></router-view>
				</keep-alive>
			</transition>

			<tabbar slot="bottom" v-if='isbar'>
				<tabbar-item selected link='/index'>
					<img slot="icon" src="../static/img/logo.png">
					<span slot="label">外卖</span>
				</tabbar-item>
				<tabbar-item link='/compass'>
					<img slot="icon" src="../static/img/compass.png">
					<span slot="label">发现</span>
				</tabbar-item>
				<tabbar-item link='/order'>
					<img slot="icon" src="../static/img/order.png">
					<span slot="label">订单</span>
				</tabbar-item>
				<tabbar-item link='/mine'>
					<img slot="icon" src="../static/img/my.png">
					<span slot="label">我的</span>
				</tabbar-item>
			</tabbar>

		<!--</view-box>-->
	</div>
</template>

<script>
	import { Tabbar, TabbarItem, ViewBox, Scroller } from 'vux'

	//require('es6-promise').polyfill();

	export default {
		components: {
			Tabbar,
			TabbarItem,
			ViewBox,
			Scroller
		},
		data() {
			return {
				isbar: true,
				animationType: ''
			}
		},
		watch: {
			$route: function(to, from) {
				var toNum = to.path.split("/").length;
				var fromNum = from.path.split('/').length;
				if(toNum > 2) {
					this.isbar = false;
				} else {
					this.isbar = true;
				}

				if(toNum == fromNum) {
					// 同级
					this.animationType = "qqq";

				} else if(toNum > fromNum) {
					//进入
					this.animationType = "routein";

				} else {
					//退出
					this.animationType = "routeout";

				}

			}
		}

	}
</script>

<style scoped>
	#app {
		font-family: "Helvetica Neue", Tahoma, Arial, PingFangSC-Regular, "Hiragino Sans GB", "Microsoft Yahei", sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		color: #2c3e50;
		height: 100%;
	}
	/*进入动画*/
	
	.routein-enter-active {
		z-index: 10;
	}
	
	.routein-enter-active,
	.routein-leave-active {
		transition: all 0.7s;
		position: absolute;
	}
	
	.routein-enter {
		transform: translateX(100%);
	}
	
	.routein-leave-active {
		transform: translateX(-50%);
	}
	/*退出动画*/
	
	.routeout-enter-active,
	.routeout-leave-active {
		transition: all 0.7s;
		position: absolute;
	}
	
	.routeout-enter {
		transform: translateX(-50%);
	}
	
	.routeout-leave-active {
		transform: translateX(100%);
		z-index: 10;
	}
	/*tab动画*/
	
	.tabani-enter-active,
	.tabani-leave-active {
		transition: all 0.7s;
	}
	
	.tabani-enter,
	.tabani-leave-active {
		transform: translateY(100%);
	}
	
	.qqq-enter-active,
	.qqq-leave-active {
		position: absolute;
	}
	
	.qqq-enter {
		position: absolute;
	}
</style>